<!--公告管理列表页-->
<template>
<div class='app-container'>
    <div class='app-box clear'>
    <div class='util-title'>
        <span>查询时间：</span>
         <el-date-picker format='yyyy-MM-dd' value-format='yyyy-MM-dd' size='mini' v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
			<el-input size="mini" class="wd230 content" v-model='data.keyWord' placeholder="请输入公告名称/内容" @keyup.enter.native="search"></el-input>
         	 <el-button size="mini" type="primary" class='btn' v-on:click='search()'>搜索</el-button>
         	 <el-button class="floatR el-button--mini" type="primary" @click="toAdd()" v-if="util.hasRule('Pages.Administration.Notices.Create')" icon="el-icon-plus">新建公告</el-button>
        
    </div>
    <div>
         <el-table v-loading="loading" :data="list" style="width: 100%" class='uti-table' stripe='true'>
            <el-table-column prop="title" label='公告标题' width=""></el-table-column>
            <el-table-column prop="totalOrg" label="组织数量" width="120"></el-table-column>
            <el-table-column prop="creationTime" label="发布日期" width="240"></el-table-column>
            <el-table-column prop="views" label="阅读次数" width="120"></el-table-column>
            <el-table-column label="操作" width="170" class="ele" align='right'>
              <template slot-scope="scope">
                <div class="ele"><a @click="toEdit(scope.row.id)" type="text" size="small"  v-if="util.hasRule('Pages.Administration.Notices.Edit')">编辑</a><a class="forDetailBtn" type="text" size="small" @click="forDetail(scope.row.id,scope.row.totalOrg)">查看详情</a></div>
              </template>
            </el-table-column>
        </el-table>
    </div>
    
    <!--el循环列表数据end-->
    <div class='page-right'>
        <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" class='util-page' size='mini'></el-pagination>

    </div>
</div>
</div>
</template>
<style rel="stylesheet/scss" lang="scss">
    .app-box{
        width: 100%;
        font-size: 13px;
        background: #fff;
        color:#606266;
        .content{
          margin-left:15px;
        }
        .btn{
          margin-left: 15px
        }
    .floatR{
        float: right;
        margin-left: 30px;
    }
    .log-input{
        margin-left: 40px;
    }
    .search1{
        margin-left: 15px;
    }
    .font{

        a{
            text-decoration: none;
            color: #027dca;
            cursor: pointer;
        }
    }
    .page-right{
        text-align: right;
        margin-top: 30px;
    }
    .uti-table{
      margin-top: 30px;
      a{
        color: #027dca;
      }
    }
    .forDetailBtn{margin-left: 10px;}
}
.addNoticeBtn{background: #ff7819;}

</style>
<script>
    export default{
      data() {
        return {
          data:{
          	keyWord:''
          },
          list: [],
          listLoading: true,
          pagetotal: null,
          value:[],
          currentPage:1,
          loading:false,
          getDay:null,
          page:1,
          st:'',
          et:''
        }
      },
      created() {
      	this.getDateChange();
      	if (this.$route.query.st) {
      		this.st = this.$route.query.st;
      		this.value = [this.st];
      	}
      	if (this.$route.query.et) {
      		this.et = this.$route.query.et;
      		this.value = [this.st,this.et]
      	}
      	if (this.$route.query.page) {
      		this.page = this.$route.query.page;
      	}
      	if (this.$route.query.keyword) {
      		this.data.keyWord = this.$route.query.keyword;
      	}
      	
      	this.fillDate();
      },
      watch:{
      	'$route' (to, from) {
      		this.page = this.$route.query.page;
      		this.data.keyWord = this.$route.query.keyword;
      		this.st = this.$route.query.st;
      		this.et = this.$route.query.et;
      		this.value = [this.st,this.et];
      		this.fillDate();
      	}
      },
      methods: {
      	getDateChange(){
      		var changeDate = new Date();
	  		var changeYear = changeDate.getFullYear();
	  		var changeMonth = changeDate.getMonth();
	  		var changeDay = changeDate.getDay();
	  		console.log(changeYear + '-' + changeMonth + '-' + changeDay);
	  		this.getDay = changeYear + '-' + changeMonth + '-' + changeDay;
      	},
        fillDate() {
        	this.loading=true;
            const that = this;
            this.st = this.value[0];
            this.et = this.value[1];
            let params = {
            	pageIndex:this.page,
            	startDate:this.st,
            	endDate:this.et,
            	keyWord:this.data.keyWord
            }
             this.post(params,'services/app/notice/GetNotices').then(response =>{
                console.log(1)
                console.log(response)
                 if (response.success) {
					this.loading=false;
		            this.list = response.result.items;
					console.log(this.list);
		            this.pagetotal = response.result.totalCount;
					this.currentPage = this.page;
		          }
            })
        },
        handleCurrentChange(val) {
          //this.fillDate(val)
          let date = this.value;
          let startDate,endDate;
          if(date&&date.length!==0){
            startDate =date[0];
            endDate=date[1]
          }
          this.$router.push({
          	name:'announce',
          	query:{
          		page:val,
          		keyword:this.data.keyWord,
          		st:startDate,
              et:endDate,
              time:new Date().getTime()
          	}
          })
        },
        search() {
          let date = this.value;
          let startDate,endDate;
          if(date&&date.length!==0){
            startDate =date[0];
            endDate=date[1];
          }
          this.$router.push({
          	name:'announce',
          	query:{
          		page:1,
          		keyword:this.data.keyWord,
          		st:startDate,
              et:endDate,
              time:new Date().getTime()
          	}
          })
        },
        toAdd() {
          this.$router.push({
            name: 'announcenew',
            params: {
              id: '0'
            }
          })
        },

         toEdit(id) {
              this.$router.push({
                name: 'announceedit',
                params: {
                  id: id
                }
              })
           },
           
        forDetail(id,total){
        	this.$router.push({
        		name:'announcedetail',
        		params:{
	        		id:id,
	        		total:total
	        	}
        	})
        }

    }
}

</script>